<%- include('./layout/header') %>
    <style>
        .turn-around {
            animation: turn_around 1.5s linear infinite reverse;
        }
        @keyframes turn_around {
            from { transform: rotate(0); }
            to { transform: rotate(360deg); }
        }

    </style>
    <div class="library-container" style="padding: 20px;">
        <div>
            <button id="add" class="ui primary button large"><i class="plus icon"></i>Add</button>
        </div>
        <table class="ui celled padded table show-list selectable">
            <thead>
                <tr>
                    <th class="ui center aligned">Cover</th>
                    <th class="ui center aligned">Name</th>
                    <th class="ui center aligned">Author</th>
                    <th class="ui center aligned">Press</th>
                    <th class="ui center aligned">Published Date</th>
                    <th class="ui center aligned">Score</th>
                    <th class="ui center aligned">Borrowed</th>
                    <th class="ui center aligned">Inventory</th>
                    <th class="ui center aligned">Introduction</th>
                    <th class="ui center aligned">Operating</th>
                </tr>
            </thead>

            <tbody>
                <% books.forEach(function (book) { %>
                   <tr 
                       data-id="<%= book._id %>"
                       data-name="<%= book.name %>"
                       data-author="<%= book.author %>"
                       data-press="<%= book.press %>"
                       data-date="<%= book.date %>"
                       data-score="<%= book.score %>"
                       data-inventory="<%= book.inventory %>"
                       data-introduction="<%- book.introduction %>">
                        <td class="ui center aligned">
                            <img class="item-cover" alt="cover" style="width: 135px;" src="<%= "/img/"+book.cover %>" >
                        </td>
                        <td class="ui center aligned single line">
                            <a href="/library/<%= book._id %>"><%= book.name %></a>
                        </td>
                        <td class="ui center aligned single line"><%= book.author %></td>
                        <td class="ui center aligned"><%= book.press %></td>
                        <td class="ui center aligned single line"><%= book.date %></td>
                        <td class="ui center aligned">
                            <div class="ui star rating" data-rating="<%= book.score %>" data-max-rating="5"></div>
                        </td>
                        <td class="ui right aligned single line">
                            Has lent <%= book.borrowCount %> books <br>
                            <% if (book.borrowCount > 0) { %>
                            <a href="/borrow/<%= book._id %>">Examine</a>
                            <% } %>
                        </td>
                        <td class="ui center aligned <% if (book.inventory <= 0) { %>warning<% } %>">
                            <%= book.inventory %> <br>
                            <!-- <% if (book.inventory <=0) { %>
                                <a href="/borrow/<%= book._id %>">Examine the Reservation</a>
                            <% } %> -->
                        </td>
                        <td>
                            <div class="alertMSG-wrap">
                                <div class="alertMSG ui custom button">View</div>
                            </div>
                            <div class="ui custom popup top left transition hidden">
                                <p><%- book.introduction %></p>
                            </div>
                        </td>
                        <td class="ui single line aligned">
                            <button class="ui green button edit <% if (book.show === false) { %>disabled<% } %>">
                                Edit</button>
                            <button class="ui orange button delete <% if (book.borrowCount > 0 || book.show === false) { %>disabled<% } %>">
                                Delete</button>
                        </td>
                    </tr>
                <% }) %>
            </tbody>

            <tfoot>

            </tfoot>
            
            <div class="addBook ui fullscreen modal transition hidden">
                <i class="close icon"></i>
                <div class="header">Add Book </div>
                <div class="content">
                    <div class="add-form ui form">
                        <form class="addForm ui form" method="post" action="/library" enctype="multipart/form-data">
                            <div class="field required inline">
                                <label style="width:100px;">Name</label>
                                <input style="width:500px;" class="name" placeholder="Name" type="text" name="name">
                            </div>
                            <div class="field required inline">
                                <label style="width:100px;">Location</label>
                                <input style="width:500px;" class="location" placeholder="Location" type="text" name="location">
                            </div>
                            <div class="field required inline">
                                <label style="width:100px;">Author</label>
                                <input style="width:500px;" class="author" placeholder="Author" type="text" name="author">
                            </div>
                            <div class="field required inline">
                                <label style="width:100px;">Press</label>
                                <input style="width:500px;" class="press" placeholder="Press" type="text" name="press">
                            </div>
                            <div class="field required inline">
                                <label style="width:100px;">Inventory</label>
                                <input style="width:500px;" class="inventory" placeholder="Inventory" type="number" name="inventory">
                            </div>
                            <div class="field required  inline">
                                <label style="width:100px;">Published Date</label>
                                <input style="width:500px;" class="date" placeholder="Published Date" type="text" name="date">
                            </div>
                            <div class="field required  inline">
                                <label style="width:100px;">Score</label>
                                <input style="width:500px;" class="score" placeholder="Score" type="number" name="score">
                            </div>
                            <div class="field  inline">
                                <label style="width:100px;">Cover</label>
                                <input style="width:500px;" class="cover" type="file" name="cover">
                            </div>
                            <div class="field  inline">
                                <label style="width:100px;">Cover Url</label>
                                <input style="width:500px;" class="cover_url" placeholder="cover url" type="text" name="cover_url">
                            </div>
                            <div class="field required ">
                                <label style="width:100px;">Introduction</label>
                                <textarea class="introduction" name="introduction" rows="5"></textarea>
                            </div>
                            <div style="display: none;">
                                <input type="button" class="ui button" value="Cancel">
                                <input id="realSubmit" type="submit" class="ui green button" value="Submit">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="actions">
                    <div id="formCancel" class="ui button">Cancel</div>
                    <div id="formSubmit" class="ui green button">Submit</div>
                </div>

                <div id="prompt" class="ui bottom attached message hidden">
                    ...
                </div>
                
            </div>
            <div class="editBook ui fullscreen modal transition hidden">
                <i class="close icon"></i>
                <div class="header">Edit Book </div>
                <div class="content">
                    <div class="ui form">
                        <form class="editForm ui form" method="post" action="/library" enctype="multipart/form-data">
                            <div class="field required">
                                <label>Name</label>
                                <input class="name" placeholder="Name" type="text" name="name">
                            </div>
                            <div class="field required">
                                <label>Author</label>
                                <input class="author" placeholder="Author" type="text" name="author">
                            </div>
                            <div class="field required">
                                <label>Press</label>
                                <input class="press" placeholder="Press" type="text" name="press">
                            </div>
                            <div class="field required">
                                <label>Inventory</label>
                                <input class="inventory" placeholder="Inventory" type="number" name="inventory">
                            </div>
                            <div class="field required">
                                <label>Published Date</label>
                                <input class="date" placeholder="Published Date" type="text" name="date">
                            </div>
                            <div class="field required">
                                <label>Score</label>
                                <input class="score" placeholder="Score" type="number" name="score">
                            </div>
                            <div class="field required">
                                <label>Introduction</label>
                                <textarea class="introduction" name="introduction" rows="5"></textarea>
                            </div>
                            <div style="display: none;">
                                <input type="button"  class="ui button" value="Cancel">
                                <input id="realEditSubmit" type="submit" class="ui green button" value="Submit">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="actions">
                    <div id="formEditCancel" class="ui button">Cancel</div>
                    <div id="formEditSubmit" class="ui green button">Submit</div>
                </div>
            </div>
            <div class="ui small test modal transition hidden">
                <div class="header">Delete your book </div>
                <div class="content">
                    <p>Are you sure you want to delete your books?</p>
                </div>
                <div class="actions">
                    <div id="noDelete" class="ui negative button">No </div>
                    <div id="yesDelete" class="ui positive right labeled icon button" onclick="$(this).find('#deleteLink')[0].click();">
                        <a style="color: #fff; " id="deleteLink" href="#">Yes</a> <i class="checkmark icon"></i> 
                    </div>
                </div>
            </div>

            
        </table>
    </div>

    <script>
        $(document).ready(function() {
           
            var Library = {
                init: function () {
                    this.pageInit();
                    this.bindEvent();
                },
                pageInit: function () {
                    $('.show-list.ui .rating').rating('disable');
                    $('.alertMSG').popup();

                },
                bindEvent: function () {
                    var editBtn = $('.edit'),
                        deleteBtn = $('.delete'),
                        noDelete = $('#noDelete'),
                        yesDelete = $('#yesDelete'),
                        addBtn = $('#add'),
                        alertMSG = $(".alertMSG");
                    $.each(deleteBtn, function(index, item) {
                        $(item).on('click', function(event) {
                            var itemId = $(this).closest('tr').data('id');
                            $('.small.modal').find('#deleteLink')[0].href = "/library/"+itemId+"/remove";
                            $('.small.modal').modal('show');
                        })  
                    });
                    $.each(alertMSG, function(index, item) {
                        $(item)
                            .popup({
                                popup: $(this).closest('.alertMSG-wrap').siblings('.popup'),
                                on: 'click'
                            });
                    })
                    $('#formCancel').on('click', function() {
                        $('.fullscreen.modal').modal('hide');
                    })
                    $('#realSubmit').on('click', function() {
                        submit();
                    })
                    $('#formSubmit').on('click', function() {
                        $('#realSubmit').click();
                    })
                    addBtn.on('click', function() {
                        $('.addBook.fullscreen.modal').modal('show');
                    })
                    $('#formEditCancel').on('click', function () {
                        $('.editBook.fullscreen.modal').modal('hide');
                    })
                    $('#realEditSubmit').on('click', function() {
                        editSubmit();
                    })
                    $('#formEditSubmit').on('click', function() {
                        $('#realEditSubmit').click();
                    })
                    $.each(editBtn, function(index, item) {
                        $(item).on('click', function() {
                            $('.editBook.fullscreen.modal').modal('show');
                            var itemData = $(item).closest('tr').data();
                            var editDom = $('.editBook.modal');
                            $(editDom).find('.name')[0].value = itemData.name;
                            $(editDom).find('.author')[0].value = itemData.author;
                            $(editDom).find('.press')[0].value = itemData.press;
                            $(editDom).find('.inventory')[0].value = itemData.inventory;
                            $(editDom).find('.date')[0].value = itemData.date;
                            $(editDom).find('.score')[0].value = itemData.score;
                            $(editDom).find('.introduction')[0].value = itemData.introduction; 
                            $(editDom).find('.editForm')[0].action = "/library/" + itemData.id + "/edit";
                        })
                    })

                    $('#GetBook').on('click', function() {
                        var book_isbn = $("#BookISBN"),
                            prompt = $('#prompt');
                        var isbn = $(book_isbn).val();
                        var addForm = $('.add-form');
                        var mainTarget = $(this); 

                        if (isbn) {
                            mainTarget.addClass('disabled');
                            mainTarget.html('<i class=\"spinner icon turn-around\"  style=\"font-size:16px;\"></i>Waiting...');
                            $.get("https://bird.ioliu.cn/v1?url=https://api.douban.com/v2/book/isbn/"+isbn, function (data) {
                                if (data.title) {
                                    $(addForm).find('.name')[0].value = data.title;
                                    $(addForm).find('.author')[0].value = data.author.join(',');
                                    $(addForm).find('.press')[0].value = data.publisher;
                                    $(addForm).find('.cover_url')[0].value = data.images.large;
                                    $(addForm).find('.date')[0].value = data.pubdate;
                                    $(addForm).find('.score')[0].value = Math.floor(data.rating.average/2);
                                    $(addForm).find('.introduction')[0].value = data.summary;  
                                    $(prompt).removeClass('hidden').addClass('positive').text('Get Successfully!')
                                } else {
                                    $(prompt).removeClass('hidden').addClass('warning').text('Can not find the book info!')
                                }
                                setTimeout(function () {
                                    // $(prompt).addClass('hidden');
                                    mainTarget.removeClass('disabled');
                                    mainTarget.html('Get');
                                }, 1000) 
                            });
                        }
                    })
                }
            }
            Library.init();
            function submit() {
                $(".ui.form").form(
                    {
                        inline: true,
                        on: 'blur',
                        fields: {
                            name: {
                                identifier: 'name',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Book name should not be empty'
                                }]
                            },
                            location: {
                                identifier: 'location',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Book location should not be empty'
                                }]
                            },
                            author: {
                                identifier: 'author',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Author should not be empty'
                                }]
                            },
                            press: {
                                identifier: 'press',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Press should not be empty'
                                }]
                            },
                            score: {
                                identifier: 'score',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Score should not be empty'
                                },{
                                    type: 'integer[0..5]',
                                    prompt: 'Score should be 0 to 5'
                                }]
                            },
                            inventory: {
                                identifier: 'inventory',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Inventory should not be empty'
                                }, {
                                    type: 'integer[0..10000]',
                                    prompt: 'Inventory can not be less than 0 or larger than 10000'
                                }]
                            },
                            date: {
                                identifier: 'date',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Date should not be empty'
                                }]
                            },
                            introduction: {
                                identifier: 'introduction',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Introduction should not be empty'
                                }]
                            }
                        },
                    }, {
                        onSuccess: function () {
                            console.log('ok')
                        }
                    }
                );
            }
            function editSubmit() {
                $(".ui.form").form(
                    {
                        inline: true,
                        on: 'blur',
                        fields: {
                            name: {
                                identifier: 'name',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Book name should not be empty'
                                }]
                            },
                            name: {
                                identifier: 'location',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Book location should not be empty'
                                }]
                            },
                            author: {
                                identifier: 'author',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Author should not be empty'
                                }]
                            },
                            press: {
                                identifier: 'press',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Press should not be empty'
                                }]
                            },
                            score: {
                                identifier: 'score',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Score should not be empty'
                                },{
                                    type: 'integer[0..5]',
                                    prompt: 'Score should be 0 to 5'
                                }]
                            },
                            inventory: {
                                identifier: 'inventory',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Inventory should not be empty'
                                }, {
                                    type: 'integer[0..10000]',
                                    prompt: 'Inventory can not be less than 0 or larger than 10000'
                                }]
                            },
                            date: {
                                identifier: 'date',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Date should not be empty'
                                }]
                            },
                            introduction: {
                                identifier: 'introduction',
                                rules: [{
                                    type: 'empty',
                                    prompt: 'Introduction should not be empty'
                                }]
                            }
                        },
                    }, {
                        onSuccess: function () {
                            console.log("edit ok!")
                        }
                    }
                );
            }
        })
        
    </script>
    
<%- include('./layout/footer') %>